<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 数据统计配置列表
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <el-table
          :data="tableData" border class="table" ref="multipleTable"
          header-cell-class-name="table-header"
      >
        <el-table-column prop="configName" label="配置名"></el-table-column>
        <el-table-column prop="fileName" label="文件名"></el-table-column>
        <el-table-column prop="chosenColumns" label="选中字段" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <router-link :to="{path:'/analysisConfigDetail',query:{configId: scope.row.id}}">
              <el-button type="text" >查看详情</el-button>
            </router-link>
            <el-button type="text" class="red" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
                       :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
      </div>

    </div>

  </div>
</template>

<script>
import {reactive, ref} from "vue";
import {deleteAnalysisConfig, getAnalysisConfig} from "../../api/analysisConfig";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: "AnalysisConfig",
  setup(){
    const query = reactive({
      file: "",
      name: "",
      pageIndex: 1,
      pageSize: 10,
    });
    const tableData = ref([]);
    const pageTotal = ref(0);

    const getPage=()=> {
      getAnalysisConfig({
        userId: localStorage.getItem("ms_userId")
      }).then(res => {
        tableData.value = res.result;
        pageTotal.value = tableData.value.length
      })
    };
    getPage();

    const handleDelete = (configId) => {
      ElMessageBox.confirm("确定要删除该数据统计配置吗？", "确认删除", {
        type: "warning",
      })
          .then(() => {
            deleteAnalysisConfig({configId}
            ).then(res=>{
              if(res.msg === '成功'){
                ElMessage.success("删除成功!")
                getPage();
              }
              else {
                ElMessage.error("删除失败:"+res.msg)
              }
            });
          })
          .catch(() => {});
    }


    return{
      query,
      tableData,
      pageTotal,
      getPage,
      handleDelete,
    };
  }
}
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
  margin-left: 10px;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
